<template>
	<view class="navigation flex m-t20">
		<scroll-view scroll-x="true" :show-scrollbar="false">
			<view class="flex p-h24">
				<view class="card flex-d-c m-r40" v-for="(item, index) in typeList" :key="index" :data-url="item.link"
					@click="gotoUrl(item)">
					<view class="icon-view flex-c">
						<image class="square-54" :src="`/static/images/home/icon-${index + 1}.png`"></image>
					</view>
					<text class="m-t20 text-500-126 no-wrap">{{ item.name }}</text>
				</view>

				<view class="fill"></view>
			</view>
		</scroll-view>
	</view>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'

const typeList = ref([])
//跳转
function gotoUrl(item) {
	if (item.name == '找工作') {
		uni.switchTab({ url: '/pages/tab-page/tab-3/tab-3' })
	} else {
		uni.navigateTo({ url: "/pages/dynamic-list/dynamic-list?id=" + item.id })
	}
}
//获取列表
async function getTypeList() {
	const res = await uni.$u.get("/dongtai/catelst")
	console.log(res)
	typeList.value = res.data;
}
getTypeList()
</script>

<style lang="scss" scoped>
.navigation {
	width: 100%;
	height: 220rpx;
	border-radius: 20rpx;
	background-color: $bg-color-1;
}

.icon-view {
	width: 90rpx;
	height: 90rpx;
	border-radius: 20rpx;
	background-color: $bg-color-4;
}

.card {
	&:nth-child(6) {
		margin-right: 0;
	}
}

.fill {
	flex-shrink: 0;
	width: 24rpx;
	height: 24rpx;
}
</style>